<template>
	<view>
		<!-- <view class="status_bar">
		</view>
		<view class="u-title">
			<u-row customStyle="padding: 20rpx ">
				<u-col span="1">
					<u-icon size="20" name="arrow-left" color="#FFFFFF" @click="goBack"></u-icon>
				</u-col>
				<u-col span="8" :offset="1">
					<u--text  :text="queryParam.siteName" color="white" :lines="1"></u--text>
				</u-col>
			</u-row>
		</view> -->
		<view class="u-block">
			<view class="title">
				实时监测数据
			</view>
			<view class="content">
				<u-line  ></u-line>
				<u-row customStyle="margin: 15px 0px" v-for="(item, index) in currentDataList"
						:key="index">
					<u-col span="3" customStyle="color:#999999" >
						<view >{{item.pointName}}</view>
					</u-col>
					<u-col span="3"  customStyle="text-align:center">
						<view >{{item.value}}{{ item.unit}}</view>
					</u-col>	
					<u-col span="6" customStyle="text-align:right">
						<view >{{item.lastUpdated}} </view>
					</u-col>
				</u-row>	
			</view>
		</view>
		<u-gap height="15" customStyle="background-color: Rgb(250,250,250)"></u-gap>
		<view class="u-block ">
			<view class="title">
				历史监测数据
			</view>
			<view class="content">
				<u-line  ></u-line>
				<view  class="sub-title">
					数据时间范围
				</view>
				<view class="u-form_content">
						<view
						class="u-page__tag-item"
						v-for="(item, index) in dateDruingList"
						:key="index"
					>
						<u-tag
							:text="item.text"
							:plain="!item.checked"
							shape="circle"
							type="warning"
							:name="index"
							@click="handDateClick"
						>
						</u-tag>
					</view>
				</view>
				<view class="u-demo-block__content">
					<view class="sub-title" >
						自定义时间
					</view>
					<view class="u-form_content">
						<view  @click="startTimeshow=true;" ><u--input
						    placeholder="开始时间"
						    border="surround"
						    v-model="selfTimeDuring.start"
							 suffixIcon="calendar-fill"
							 readonly 
						  ></u--input> 
						  </view> 
						  至
						  <view  @click="endTimeShow=true;" >
						  <u--input
						     placeholder="结束时间"
						     border="surround"
						     v-model="selfTimeDuring.end"
							 readonly
							 suffixIcon="calendar-fill"
						   ></u--input> </view> 
					</view>
				</view>
				<view class="u-demo-block__content">
					<view class="sub-title" >
						选择监测项目
					</view>
					<view class="u-form_content">
						<view class="u-page__checkbox-item">
							 <u-checkbox-group
								placement="row"
								v-model="indexList"
								@change="handChangePoint"
							  >
								<u-checkbox
								  :customStyle="{marginRight: '10px'}"
								  v-for="(item, index) in currentDataList"
								   activeColor="#f9ae3d" 
								  :key="index"
								  :label="item.pointName"
								  :name="item.pointCode"
								> 
								</u-checkbox>
							  </u-checkbox-group>
					  </view>
					</view>
				</view>
				<view class="u-demo-block__content">
					<view class="chart-title" >
						<u--text  :text="queryParam.siteName" :block="true"  customStyle="width:70vw;textAlign:center" :lines="2" align="center" :bold="true"  ></u--text>
					</view>
					<view class="u-form_content">
					<view class="charts-box">
					    <qiun-data-charts 
					      type="area"
					      :opts="opts"
					      :chartData="chartData"
					    />
					  </view>
					</view>
				</view>
			</view>
	   	</view>
		
		<u-datetime-picker :show="startTimeshow"  v-model="queryParam.start"    @cancel="startTimeshow=false" @confirm="timeconfirm('start')"  
		 mode="datetime"></u-datetime-picker>	
		 <u-datetime-picker :show="endTimeShow"  v-model="queryParam.end"   @cancel="endTimeShow=false" @confirm="timeconfirm('end')"
		 mode="datetime"></u-datetime-picker>
	</view>
</template> 

<script> 
import {
	getHisAggData,
		queryMonitordata
	} from '@/common/api.js';
	export default {
		data() {
			return {
				startTimeshow:false,
				endTimeShow:false,
				chartData: {},
				queryParam: {
					siteId: '',
					siteName: '',
					start: Number(new Date())- 2*60*60*1000,
					end: Number(new Date()),
					aggregation: 'first',
					index: '',
					interval: 'm',					
					value: '5',					
				},
				selfTimeDuring:{
					start: '',
					end: '',
				},
				currentDataList:[],
				indexList:[],
				 opts: {
					color: ["#00FCF0"],
					padding: [15,15,0,15],
					enableScroll: false,
					legend: {},
					dataLabel: false,
					dataPointShape: false,
					xAxis: {
					  disableGrid: true,
					  labelCount:3,

					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2,
					  tofix:2
					},
					extra: {
					  area: {
						type: "curve",
						opacity: 0.2,
						addLine: true,
						width: 2,
						gradient: true,
						activeType: "hollow"
					  }
					}
			  },
				dateDruingList: [{
					checked: true,
					text: '2小时',
					code: '2'
				},
				{
					checked: false,
					text: '6小时',
					code: '6'
					
				},
				{
					checked: false,
					text: '12小时',
					code: '12'
				},
				{
					checked: false,
					text: '24小时',
					code: '24'
				},
				{
					checked: false,
					text: '48小时',
					code: '48'
				}
				],
				 radiolist1: [{
				            name: '水位',
				            disabled: false
				          },
				            {
				              name: '溶解氧',
				              disabled: false
				            },
				            {
				              name: '氨氮',
				              disabled: false
				            }, {
				              name: '总磷',
				              disabled: false
				            }, {
				              name: '总氮',
				              disabled: false
				            }
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				          radiovalue1: '苹果',
			}
		},
		methods: {
			goBack() {
				if(this.showQuery){
					this.showQuery =false;
				}else{
					uni.navigateBack();
				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},	
			timeconfirm(e){
				const timeFormat = uni.$u.timeFormat;
				if(e=='start'){
						this.selfTimeDuring.start= timeFormat(this.queryParam.start, 'yyyy-mm-dd hh:MM');
						this.startTimeshow=false;
				}
				if(e=='end'){
						this.selfTimeDuring.end=  timeFormat(this.queryParam.end, 'yyyy-mm-dd hh:MM');
						this.endTimeShow=false;
				}
				
				if(this.selfTimeDuring.start&& this.selfTimeDuring.end){
					this.getHistoryData();
				}
			},
			async getHistoryData() {
				try {
					const param =this.queryParam;
					if(!param.start||!param.end){
						return;
					};
					const timeFormat = uni.$u.timeFormat;
					param.start= timeFormat(this.queryParam.start, 'yyyy-mm-dd hh:MM:ss');
					param.end= timeFormat(this.queryParam.end, 'yyyy-mm-dd hh:MM:ss');
					const  indexs= this.indexList;
					const data= {
					  categories: [],
					  series: []
					};
					for (let index of indexs) {
						param.index = index;
						const result= await getHisAggData(param);
						/* if(result){
							param.index = index;
							const result= await getHisAggData(param); */
							if(result){
								const name = this.currentDataList.find(item => item.pointCode ==index)?.pointName;
								const serie ={
									name: name,
									data: []
								}
								const categories =[];						
								result.forEach(item => {
								  categories.push(item.time.substr(5));
								   serie.data.push(item.value);
								});
								data.series.push(serie);
								data.categories =categories;
							}
						/* } */
					}
					console.log(data)
				   this.chartData =data;
				} catch (error) {
					// 处理请求失败的逻辑
					console.error(error);
				}
			   
			    },
				handChangePoint(n) {
					this.indexList = n;
					this.getHistoryData();
				},		
				async  getMonitordata() {
					try {
						const result = await queryMonitordata({siteId:this.queryParam.siteId});
						if (result.appMonitorPointDataDtoList) {
								this.currentDataList = result.appMonitorPointDataDtoList;
								this.indexList.push(result.appMonitorPointDataDtoList[0].pointCode);
								this.getHistoryData();
						}	
					} catch (error) {
						// 处理请求失败的逻辑
						console.error(error);
					}
			    },
				handDateClick(name) {
					this.dateDruingList.map((item, index) => {
						item.checked = index === name ? true : false
					})
					this.queryParam.start =  Number(new Date())- this.dateDruingList[name].code*60*60*1000;
					this.queryParam.end = Number(new Date());
					this.getHistoryData();
				},
		},
		 onReady() {
			this.getMonitordata();
		  },
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onLoad(option) {
			this.queryParam.siteName = option.siteName;
			this.queryParam.siteId = option.siteId;
			uni.setNavigationBarTitle({
			    title: this.queryParam.siteName
			});
		},
	};
</script>
<style lang="scss" scoped> 
.status_bar {
	background-color: #FF5000;
	      height: var(--status-bar-height);
	      width: 100%;
	}
.u-title {
		background-color: #FF5000;
		text-align: center;
}
.u-block{
	padding: 10rpx;
	.title{
		font-weight: bold;
		padding: 20rpx 10rpx
	}
	.content{
		padding-top: 10rpx;
	}
	.sub-title{
		margin: 30rpx 10rpx;
	}
	.chart-title{
		margin: 50rpx 0 0 10rpx;
	}
	.u-form_content{
		margin: 20rpx 0;
		display: flex;
		 justify-content: center; /* 水平居中 */
		 align-items: center; /* 垂直居中 */
	}
	.u-page__tag-item {
			margin-right: 5rpx;
			width: 18%;
	}
	 .charts-box {
	    width: 100%;
	    height:500rpx;
	  }
}	




</style>
